<template>
  <div class="app-container">
    <xm-table ref="xmtable" :url='url'>
      <template v-slot:actions>
        <el-button class="filter-item" type="primary" @click.native="handleAdd">添加</el-button>
        <!-- <router-link class="el-button el-button--primary" :to="{path:'/project/addProject',params:{}}">添加</router-link> -->
      </template>

      <template v-slot:search>
        <el-input v-model="where.name" placeholder="输入名称搜索" style="width: 200px;" class="filter-item" @keypress.enter.native="table.where(where)" />
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click.native="table.where(where)" >搜索</el-button>
      </template>

      <!--表格主内容-->
      <template v-slot:table="slotProps">
        <el-table
            :key="slotProps.tableKey"
            v-loading="slotProps.listLoading"
            :data="slotProps.list"
            border
            highlight-current-row
            style="width: 100%;"
        >
          <el-table-column label="名称">
            <template slot-scope="scope">
			  <el-button type="text"  @click="linkTo({path:'/project/packetList',query:{id:scope.row.project_id}})">{{ scope.row.name }}</el-button>
            </template>
          </el-table-column>

          <el-table-column label="单个红包金额">
            <template slot-scope="scope">
              {{ scope.row.money}}
            </template>
          </el-table-column>

          <el-table-column label="数量" width="150px">
            <template slot-scope="scope">
              <span>{{ scope.row.number }}</span>
            </template>
          </el-table-column>

          <el-table-column label="剩余红包量" width="150px">
            <template slot-scope="scope">
              <span>{{ scope.row.remaining }}</span>
            </template>
          </el-table-column>

          <el-table-column label="状态" width="100px">
            <template slot-scope="scope">
              <el-tag type="primary">
                <span>{{ +scope.row.delete_time > 0 ? '关闭' : '开启' }}</span>
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="260" class-name="small-padding fixed-width">
            <template slot-scope="{row}">
              <el-button type="primary" size="mini" @click="handleEdit(row)">编辑</el-button>

              <el-button v-if="row.delete_time > 0" size="mini" type="danger" @click.native="table.delete(row.project_id, '是否操作')">关闭</el-button>

              <el-button v-if="row.delete_time <= 0" size="mini" type="success" @click.native="table.delete(row.project_id, '是否操作')">开启</el-button>

			  <el-button type="primary" size="mini" @click="getProjectDown(row)">下载</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </xm-table>

    <!--新增/编辑弹窗-->
    <el-dialog :visible.sync="isAddModalShow">
      <el-form ref="dataForm"
          :rules="rules"
          :model="sizeForm"
          label-position="left"
          label-width="100px"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="sizeForm.name" />
        </el-form-item>

        <el-form-item label="单个红包额" prop="money" v-if="!nowId">
          <el-input v-model="sizeForm.money" />
        </el-form-item>

        <el-form-item label="数量" prop="number" v-if="!nowId">
          <el-input v-model="sizeForm.number" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="isAddModalShow = false">取消</el-button>
        <el-button type="primary" @click="createdData(nowId)">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import xmTable from "@/components/xmTable"
//import { constants } from 'fs';

export default {
  name: 'projectList',
  components: {
    xmTable,
  },
  data() {
    return {
      url: api.project,     //请求地址
      table: {},            //获取table内部方法
      where: {              //搜索用关键字
        name: ''
      },
      nowId: 0,              //当前id
	  isAddModalShow: false, //弹窗控制

      sizeForm: {
        name: '',
        money: 0,
        number: 0
      },
      //校验规则
      rules: {
        name: [{ required: true, message: '请输入名称' }],
        money: [{ required: true, message: '请输入红包金额' }],
        number: [{ required: true, message: '请输入红包数量' }]
      }
    }
  },
  created() {

  },
  mounted() {
    const vm = this;
    vm.table = vm.$refs.xmtable
  },
  computed: {

  },
  methods: {
    // 获取数据接口
    async getprojectItem(id) {
      id = id || '0'
      const vm = this
      let url = api.project + '/' + id + '/edit'
      return vm.$axios.get(url)
        .then((res) => {
          vm.sizeForm.name = res.name
          vm.sizeForm.money = res.money
          vm.sizeForm.number = res.number
        })
    },
    // 提交/修改 数据接口
    createdData() {
      const vm = this
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const postData = JSON.parse(JSON.stringify(vm.sizeForm))    //静态data
          const id = vm.nowId                 //判断是否编辑
          let method = 'post'
          let url = api.project
          if (id) {
            url = url + '/' + id
            method = 'put'
          }
          vm.$axios[method](url, postData)
            .then((res) => {
              vm.table.reset()
              vm.table.getList()
              vm.isAddModalShow = false
              vm.$message({
                message: '成功',
                type: 'success'
              })
          })
        }
      })
    },
    // 下载接口
    getProjectDown(row) {
      const vm = this
      let id = row.project_id

      let url = api.projectItem + '/excel/' + id + '?authorization=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJqdGkiOiIxIiwiaWF0IjoxNTcxNDgxOTkwLCJleHAiOjE1NzE4NDE5OTAsImRhdGEiOltdfQ.-559j7BnnQJV6iPV3YbsTR90sYSGmKJQoQKHb7qkc_k'
      window.open(url)
      return false

      // let url = api.projectItem + '/' + id + '/edit'
      // vm.$axios.get(url).then((res) => {
      //   if (!res) return false
      //   let url = window.URL.createObjectURL(new Blob([res]))
      //   let link = document.createElement('a')
      //   link.style.display = 'none'
      //   link.href = url
      //   link.setAttribute('download', 'excel.xlsx')
      //
      //   document.body.appendChild(link)
      //   link.click()
      // })
    },
    //添加
    handleAdd() {
      const vm = this
      vm.nowId = ''
      vm.resetForm()
      vm.isAddModalShow = true
    },
    //编辑
    async handleEdit(row) {
      const vm = this
      let id = row.project_id
      vm.nowId = id
      vm.resetForm()
      await vm.getprojectItem(id)
      vm.isAddModalShow = true
    },
    //跳转
    linkTo(obj) {
      const vm = this
      vm.$router.push({
        path: obj.path,
        query: {
          id: obj.query.id
        }
      })
    },

    resetForm() {
      const vm = this
      vm.sizeForm = {
          name: '',
          money: 0,
          number: 0
      }
    }
  }
}
</script>

<style scoped>
  .btnLink {
    display: block;
    width:100%;
  }
</style>
